import * as echarts from 'echarts'

let isunityColor = [
    ['#063CFF', 'rgba(6, 60, 255, 0.08)'],
    ['#31C3E3', 'rgba(49, 195, 227, 0.08)'],
    ['#FF6060', 'rgba(255, 96, 96, 0.1)'],
    ['#FDB15C', 'rgba(253, 177, 92, 0.1)'],
  ],
  unifiedColor = ['#31C3E3', '#82E9FF']
const PictorialBar2Option = ({ dataList, xdata, type }) => {
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params) {
        return params[0].name + ': ' + params[0].value
      },
    },
    grid: {
      left: 60,
      top: 20,
      right: 20,
      bottom: '15%',
    },
    xAxis: {
      data: xdata,
      axisTick: { show: false },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: '#8D93A7',
        interval: 0,
      },
    },
    yAxis: {
      max: type === 'isunity' ? 60 : 80,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#D4D6E1',
          type: 'dashed',
        },
      },
      splitNumber: 4,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: true, itemStyle: { color: '#8D93A7' } },
    },
    series: [
      {
        name: '',
        type: 'pictorialBar',
        data: dataList,
        barCategoryGap: type === 'isunity' ? '-150%' : '18%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          opacity: 0.5,
          color: function (params) {
            if (type === 'isunity') {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: isunityColor[params.dataIndex][0],
                },
                {
                  offset: 1,
                  color: isunityColor[params.dataIndex][1],
                },
              ])
            } else if (type === 'unified') {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: unifiedColor[0],
                },
                {
                  offset: 1,
                  color: unifiedColor[1],
                },
              ])
            }
          },
        },
        emphasis: {
          itemStyle: {
            opacity: 1,
          },
        },
        z: 10,
        label: {
          show: false,
          color: '#8D93A7',
          position: 'top',
        },
      },
    ],
  }

  return options
}

export { PictorialBar2Option }
